ul{}
ul li{}
ul li h2{}
h1{
    font-size:40px;
    text-align: center;

}

.box{
    display: flex;
    /* 
        flex默认布局:
        1.水平方向-左侧对齐,默认不换行
    */
    padding:20px;
    margin-bottom: 20px;
    border:8px solid #000;
}
.box div{
    height: 200px;
    line-height: 200px;
    text-align: center;
    color:#fff;
    font-size: 20px;
    margin: 5px;
}
.box1{
    width: 100px;
    background-color: red;
}
.box2{
    width: 200px;
    background-color:#ffd200;
}
.box3{
    width: 300px;
    background-color: blue;
}

.box .box4{
    width: 100px;
    height: 100px;
    line-height: 100px;
    background-color: red;
}
.box .box5{
    width: 100px;
    height: 300px;
    line-height: 300px;
    background-color: #ffd200;
}
.box .box6{
    width: 100px;
    height: 500px;
    line-height: 500px;
    background-color: blue;
}
/* flex-direction */
    .g-box1{
        /* 默认 */
        flex-direction: row;
    }
    .g-box2{
        flex-direction: row-reverse;
    }
    .g-box3{
        flex-direction: column;
    }
    .g-box4{
        flex-direction: column-reverse;
    }
/* flex-direction */

/* flex-wrap */
    .m-wrap .box div{
        margin-bottom: 20px;
    }
    .g-box11{
        /* 默认 */
        flex-wrap: nowrap;
    }
    .g-box12{
        flex-wrap: wrap;
    }
    .g-box13{
        flex-wrap:wrap-reverse;
    }
/* flex-direction */

/* flex-flow */
    .g-box21{
        /* 默认 */
        flex-flow: row nowrap;
    }
    .g-box22{
        flex-flow: row wrap;
    }
/* flex-flow */

/* justify-content */
    .m-justify-content .box{
        /* flex-direction: column; */
    }
    .g-box31{
        /* 默认 */
        justify-content:flex-start;
    }
    .g-box32{
        justify-content:flex-end;
    }
    .g-box33{
        justify-content:center;
    }
    .g-box34{
        justify-content: space-between;
    }
    .g-box35{
        justify-content: space-around;
    }
/* justify-content */

/* align-items */
    .m-align-items .box{
        /* flex-direction:column; */

    }
    .g-box41{
        align-items: flex-start;
    }
    .g-box42{
        align-items: flex-end;
    }
    .g-box43{
        align-items: center;
    }
    .g-box44{
        align-items: baseline;
    }
    .g-box44 .box4{
        line-height: normal;
    }
    .g-box45{
        align-items: stretch;
    }
    .g-box45 div{
        background-color: tomato;
    }
/* align-items */